<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>微笑</title>
		<style>
			/* 画圆 */
			#d1{
				width: 500px;
				height: 500px;
				/* 画圆 ：背景色  画框 */
				background-color: #ffee2e;
				/* 边框倒角条件  ：边框或者背景色 */
				border-radius: 50%;
				/* 微调定位 */
				position: relative;
				left:430px;
				top:243px;
			}
			#d2{
				width: 126px;
				height: 167px;
				/* 画圆 ：背景色  画框 */
				background-color: #ffffff;
				/* 边框倒角条件  ：边框或者背景色 */
				border-radius: 50%;	
				/* 定位属性：元素定位到页面上 */
				/* 相对定位：相对于父级元素进行定位；网页x,y轴 */
				position: relative;
				left: 88px;/* x轴：横向 */
				top: 96px;/* y轴：纵轴 */
			}
			#d3{
			width: 126px;
			height: 167px;
			/* 画圆 ：背景色  画框 */
			background-color: #ffffff;
			/* 边框倒角条件  ：边框或者背景色 */
			border-radius: 50%;	
			/* 定位属性：元素定位到页面上 */
			/* 相对定位：相对于父级元素进行定位；网页x,y轴 */
			position: relative;
			left: 176px;/* x轴：横向 */
			top: 6px;/* y轴：纵轴 */	
			}
			#d4{
				width: 77px;
				height: 88px;
				/* 画圆 ：背景色  画框 */
				background-color: #000000;
				/* 边框倒角条件  ：边框或者背景色 */
				border-radius: 50%;	
				/* 定位属性：元素定位到页面上 */
				/* 相对定位：相对于父级元素进行定位；网页x,y轴 */
				position: relative;
				left: -153px;/* x轴：横向 */
				top: 56px;/* y轴：纵轴 */	
			}
			#d5{
				width: 77px;
				height: 88px;
				/* 画圆 ：背景色  画框 */
				background-color: #000000;
				/* 边框倒角条件  ：边框或者背景色 */
				border-radius: 50%;	
				/* 定位属性：元素定位到页面上 */
				/* 相对定位：相对于父级元素进行定位；网页x,y轴 */
				position: relative;
				left: 174px;/* x轴：横向 */
				top: 5px;/* y轴：纵轴 */
			}
			#d6{
				border: 8px solid #000;
				width: 210px;
				height: 150px;
				/* 画圆 ：背景色  画框 */
				/* 边框倒角条件  ：边框或者背景色 */
				border-radius: 50%;
				border-right: 0px;
				border-left:0px;
				border-bottom: 0px;
				/* 定位属性：元素定位到页面上 */
				/* 相对定位：相对于父级元素进行定位；网页x,y轴 */
				transform: rotate(-180deg);
				position: relative;
				left: -145px;/* x轴：横向 */
				top: 107px;/* y轴：纵轴 */
			}
		  
			#d7{
				width: 126px;
				height: 83px;
				/* 画圆 ：背景色  画框 */
				background-color: #fbbeff;
				/* 边框倒角条件  ：边框或者背景色 */
				border-radius: 50%;	
				/* 定位属性：元素定位到页面上 */
				/* 相对定位：相对于父级元素进行定位；网页x,y轴 */
				position: relative;
				left: 174px;/* x轴：横向 */
				top: 89px;/* y轴：纵轴 */
			}
			#d8{
				width: 126px;
				height: 83px;
				/* 画圆 ：背景色  画框 */
				background-color: #fbbeff;
				/* 边框倒角条件  ：边框或者背景色 */
				border-radius: 50%;	
				/* 定位属性：元素定位到页面上 */
				/* 相对定位：相对于父级元素进行定位；网页x,y轴 */
				position: relative;
				left: -241px;/* x轴：横向 */
				top: -8px;/* y轴：纵轴 */
			}
			
		</style>
	</head>
	<body>
		<!-- 画三个圈 -->
		<div id="d1">
			<div id="d2">
				<div id="d3">
					<div id="d4">
						<div id="d5">
						<div id="d6">
							<div id="d7">
								<div id="d8"></div>
							</div>
						</div>
						</div>
					</div>
				<div>
			</div>
		</div>
		<!-- 画线 -->
		<p></p>
	</body>
</html>